<template>
  <div>
    <set-header :share-a="shareA" :share-txt="shareTxt" :choose-color="chooseColor" :is-color="isColor" :lastColor="lastColor"></set-header>
    <div class="body">
      <div class="body-header">
        <span class="creat floatLeft">
          <span class="cricle block"></span>
          <span class="name block">By Sun He</span>
          <span class="first block">First created</span>
        </span>
        <span class="ggg floatLeft">ggg</span>
        <div class="clear"></div>
      </div>
      <div class="body-bottom">
        <div class="body-bottom-left floatLeft"></div>
        <div class="body-bottom-right floatLeft">
          <span class="money block">AU$ 0.00</span>
          <span class="pledged block">pledged of AU$ 0 goal</span>
          <span class="zero block">0</span>
          <span class="backers block">backers</span>
          <div class="live">
            <span class="block">THIS PROJECT IS NOT LIVE</span>
            <span class="block">This is only draft that the creator has chosen to share.</span>
          </div>
        </div>
        <div class="clear"></div>
      </div>
    </div>
    <div class="footer">
      <div class="footer-left floatLeft">
        <span class="block">About</span>
        <span class="block">Questions about this project? <a class="lineBlock">Check out the FAQ</a></span>
      </div>
      <div class="footer-right floatLeft">
        <span class="block">Support</span>
      </div>
      <div class="clear"></div>
    </div>
  </div>

</template>

<script>
  import setHeader from '../public/SetHeader'
  import setFooter from '../public/SetFooter'

    export default {
        name: "preview",
        components:{ setHeader, setFooter },
        data(){
            return{
                shareA:'Share a preview of your project with friends.',
                shareTxt:'Once you launch, the preview link will redirect to your live project page.',
                chooseColor:[ false, false, false, false, false ],
                isColor:true,
                lastColor:[ false, false, false, false, true ]
            }
        }
    }
</script>

<style scoped lang="scss">
  .floatLeft{float: left}
  .block{display: block}
  .lineBlock{display: inline-block}
  .clear{clear: both}
  .body{
    background: #FBFBFA;
    padding-bottom: 130px;
  }
  .body-header{
    font-family: ArialMT;
    color: #666666;
    height: 258px;
    letter-spacing: 0.2px;
    .creat{
      margin: 65px 133px 0 97px;
      width: 81px;
      font-size: 14px;
      .cricle{
        background: #D8D8D8;
        width: 51px;
        height: 51px;
        border-radius: 50%;
      }
      .name{
        color: #2E2E2E;
        margin-top: 23px;
        letter-spacing: 0px;
      }
    }
    .ggg{
      font-size: 18px;
      margin-top: 89px;
    }
  }
  .body-bottom{
    .body-bottom-left{
      margin: 0 36px 0 89px;
      width: 818px;
      height: 460px;
      background: #F7F7F7;
    }
    .body-bottom-right{
      width: 390px;
      border-top: 3px solid #DDDEDD;
      padding-top: 26px;
      font-family: ArialMT;
      font-size: 14px;
      color: #2E2E2E;
      letter-spacing: 0.4px;
      .money{font-size: 24px;}
      .pledged{
        color: #666666;
        letter-spacing: 0.2px;
        margin-top: 7px;
      }
      .zero{
        font-size: 24px;
        margin:20px 0 7px 0;
      }
      .backers{
        color: #666666;
        letter-spacing: 0.2px;
      }
      .live{
        background: #F0F0F0;
        border: 1px solid #DBDEDD;
        width: 390px;
        height: 135px;
        margin-top:56px;
        padding:25px 0 0 22px;
        box-sizing: border-box;
        span:nth-child(1){
          font-size: 18px;
          letter-spacing: -0.6px;
        }
        span:nth-child(2){
          letter-spacing: 0.7px;
          margin-top: 17px;
        }
      }
    }
  }
  .footer{
    padding: 154px 0 141px 200px;
    font-family: ArialMT;
    color: #2E2E2E;
    .footer-left{
      width: 678px;
      border-bottom: 1px solid #DBDEDD;
      span{
        margin-bottom: 48px;
        font-size: 20px;
        letter-spacing: 0.4px;
        a{
          border-bottom: 2px solid black;
          font-size: 16px;
          color: #000000;
          letter-spacing: 1.4px;
          line-height: 16px;
        }
      }
      span:nth-child(2){
        font-size: 14px;
        letter-spacing: 1.4px;
      }
    }
    .footer-right{
      font-size: 20px;
      letter-spacing: 0.4px;
      margin-left:44px;
    }
  }


</style>
